﻿@{
    ViewBag.Title = "jQuery File Upload Demo with Backload - Basic version";
}

@section styles { 
    <!-- We use Backloads. bundeling feature to register all client side javascript and style files of the jQuery File Upload Plugin  -->
    @Styles.Render("~/bundles/fileupload/bootstrap/Basic/css")

    <!-- Optional: Some styles for this demo page -->
    <link href="~/Content/demos.bootstrap.styles.css" rel="stylesheet" />
}    
    
@section scripts {
    <!-- We use Backloads. bundeling feature to register all client side javascript and style files of the jQuery File Upload Plugin  -->
    @Scripts.Render("~/bundles/fileupload/bootstrap/Basic/js")
    
    <!-- Initialize the jQuery File Upload Plugin -->
    <script src="~/Scripts/demos.bootstrap.basic.js"></script>
}


<div class="page-header">
    <h1>jQuery File Upload Demo</h1>
    <h2 class="lead">Basic version</h2>
    <ul class="nav nav-tabs">
        <li class="active"><a href="/Home/Basic">Basic</a></li>
        <li><a href="/Home/BasicPlus">Basic Plus</a></li>
        <li><a href="/Home/Index">Basic Plus UI</a></li>
        <li><a href="/Home/AngularJS">AngularJS</a></li>
        <li><a href="/Home/JQueryUI">JQuery UI</a></li>
    </ul>
    <blockquote>
        <p>File Upload widget with multiple file selection, drag&amp;drop support and progress bar for jQuery.<br>
        Supports cross-domain, chunked and resumable file uploads.<br>
    </blockquote>
</div>

<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
    <i class="icon-plus icon-white"></i>
    <span>Select files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
</span>
<br>
<br>
<!-- The global progress bar -->
<div id="progress" class="progress progress-success progress-striped">
    <div class="bar"></div>
</div>
<!-- The container for the uploaded files -->
<div id="files" class="files"></div>
<br>

<div class="well">
    <h3>Demo Notes</h3>
    <ul>
        <li>If you need a different handling of uploaded images and other file types (e.g. pdf) you may use "uploadContext" or content type subfolders (<a href="https://github.com/blackcity/backload" target="_blank">Backload.</a>).</li>
        <li>Uploaded files will be stored in the "~/Files" folder by default. This can be easiliy changed in the config file. Please refer to Backloads <a href="https://github.com/blackcity/backload/wiki" target="_blank">projects website</a>.</li>
        <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage with Google Chrome, Internet Explorer 10+ Mozilla Firefox, and Apple Safari.</li>
        <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload" target="_blank">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki" target="_blank">documentation</a> for more information.</li>
        <li>Built with Twitter's <a href="http://twitter.github.com/bootstrap/" target="_blank">Bootstrap</a> toolkit and Icons from <a href="http://glyphicons.com/" target="_blank">Glyphicons</a>.</li>
    </ul><br />
    <h3>Backload server side component</h3>
    <ul>
        <li>Project website: <a href="https://github.com/blackcity/backload" target="_blank">Backload on GitHub</a></li>
        <li>Documentation: <a href="https://github.com/blackcity/backload/wiki" target="_blank">Backload wiki</a></li>
        <li>NuGet package: <a href="http://nuget.org/packages/Backload/" target="_blank">Backload on NuGet</a></li>
        <li>Package manager console: <b>PM> Install-Package Backload</b></li>
    </ul>
</div>